<template>
  <view class="yuongjin">
    <view v-if="ShangJiList.length">
      <view class="title" :style="{ color: themeColor1 }">邀请我的</view>
      <view ref="collapseItem" :index="item.id" v-for="(item, index) in ShangJiList" :key="item.id">
        <view class="module">
          <view class="item">
            <view class="index">{{ index + 1 }}</view>

            <view class="info">
              <u-avatar :src="$util.img(item.headimg)" size="70"></u-avatar>
              <view class="userInfo" v-if="item.nickname || item.mobile">
                <view class="name">
                  {{ item.nickname }}
                </view>
                <view class="mobile">
                  {{ item.mobile }}
                </view>
              </view>
            </view>

            <view v-if="item.pay_time">
              <view class="time" v-for="item_1 in item.pay_time.split(' ')">
                {{ item_1 }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="XiaJiList.length">
      <view class="title" :style="{ color: themeColor1 }">我邀请的</view>
      <view ref="collapseItem" :index="item.id" v-for="(item, index) in XiaJiList" :key="item.id">
        <view class="module">
          <view class="item">
            <view class="index">{{ index + 1 }}</view>

            <view class="info">
              <u-avatar :src="$util.img(item.headimg)" size="70"></u-avatar>
              <view class="userInfo" v-if="item.nickname || item.mobile">
                <view class="name">
                  {{ item.nickname }}
                </view>
                <view class="mobile">
                  {{ item.mobile }}
                </view>
              </view>
            </view>

            <view v-if="item.pay_time">
              <view class="time" v-for="item_1 in item.pay_time.split(' ')">
                {{ item_1 }}
              </view>
            </view>

            <button v-else type="primary" :style="{ 'backgroundColor': themeColor1, 'color': btn_text_color }" size="mini"
              class="button btn">未下单</button>

          </view>
        </view>
      </view>
    </view>

    <ns-empty v-if="!XiaJiList.length && !ShangJiList.length" :isIndex="false" text="暂无邀请记录"></ns-empty>

    <button @click="showMemberQrcode" type="primary" :style="{ 'backgroundColor': themeColor1, 'color': btn_text_color }"
      size="mini" class="inviteBtn button btn">邀请好友</button>
    <!-- 会员码 -->
    <uni-popup ref="erWeiPopup" type="center">
      <view class="member-code-popup">
        <view class="popup-top" @click="getMemberQrcode">
          <view class="popup-top-title">
            <view class="iconfont icon-erweima"></view>
            <view class="popup-top-title-txt">邀请码</view>
          </view>
          <view class="popup-top-erwei">
            <image :src="$util.img(memberCode.qrcode)" mode="" show-menu-by-longpress></image>
          </view>
        </view>
        <view class="popup-bottom"><text class="iconfont iconfont-delete icon-close-guanbi"
            @click="closeMemberQrcode"></text></view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  components: {
  },
  mixins: [],
  data() {
    return {
      themeColor1: '',
      btn_text_color: '',
      current: 0,
      data: [],
      status: 'loadmore',
      page: 1,
      pageSize: 10,
      count: 0,
      options: {},
      XiaJiList: [],
      ShangJiList: [],
      memberCode: {
        timer: null,
        barcode: '',
        qrcode: '',
        routerParameter: '',
        dynamicNumber: ''
      }
    }
  },
  onReachBottom() {

  },
  onShow() {
    this.$api.sendRequest({
      url: "/api/member/judgeBuy",
      success: res => {
        if (!res.data) {
          uni.hideShareMenu()
        }
      }
    });
  },
  onLoad(options) {
    let theme = uni.getStorageSync('theme_style');
    this.themeColor1 = `${theme.main_color}`;
    this.btn_text_color = `${theme.btn_text_color}`;

    
    this.options = options
    this.myTeamList()


  },
  methods: {
    /**
     * 判断是否显示会员码
     */
    showMemberQrcode() {
      this.$api.sendRequest({
        url: "/api/member/judgeBuy",
        success: res => {
          if (!res.data) {
            this.$util.showToast({
              title: '请先购买会员产品，解锁推广权限'
            });
          } else {
            if (this.memberCode.timer) clearInterval(this.memberCode.timer);
            this.getMemberQrcode();
            if (!this.$refs.erWeiPopup.showPopup) this.$refs.erWeiPopup.open()
          }
        }
      });

    },
    /**
     * 关闭会员码
     */
    closeMemberQrcode() {
      clearInterval(this.memberCode.timer);
      this.$refs.erWeiPopup.close();
    },
    /**
     * 获取会员码
     */
    getMemberQrcode() {
      this.$api.sendRequest({
        url: '/api/member/membereqrcode',
        data: {
          page: ''
        },
        success: res => {
          if (res.code == 0) {
            this.memberCode.barcode = res.bar_code;
            this.memberCode.qrcode = res.data.path;
            this.memberCode.routerParameter = res.data.url;
            this.memberCode.dynamicNumber = res.dynamic_number;
            if (!this.$refs.erWeiPopup.showPopup) this.$refs.erWeiPopup.open();
          }
        }
      });
    },

    myTeamList() {
      this.$api.sendRequest({
        url: '/api/member/myInvite',
        data: {},
        success: res => {
          console.log(res);
          this.XiaJiList = res.data.xiaji
          this.ShangJiList = res.data.shangji
        }
      });
    },
  },
  onShareTimeline() {
    return {
      title: '鹏城快享',
      query: `source_member=${uni.getStorageSync("user_id")}`,
      imageUrl: ""
    }
  },
  onShareAppMessage() {
    return {
      title: "鹏城快享",
      path: `/pages/index/index?source_member=${uni.getStorageSync("user_id")}`,
      imageUrl: ''
    }
  },
};
</script>

<style lang="scss" scoped>
@import '@/common/css/diy.scss';

.member-code-popup {
  width: 480rpx;
  height: 560rpx;
  background: none;

  .popup-top {
    padding: 40rpx;
    box-sizing: border-box;
    width: 100%;
    height: 800rpx;
    background: #ffffff;
    border-radius: 12rpx;

    .popup-top-title {
      display: flex;
      align-items: center;
      margin-bottom: 60rpx;

      .popup-top-title-txt {
        font-size: 30rpx;
        margin-left: 16rpx;
      }
    }

    .popup-top-tiao {
      width: 480rpx;
      height: 160rpx;
      margin: 0 auto 46rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .popup-top-tiaoJie {
      text-align: center;
      font-size: 28rpx;
      color: rgb(153, 153, 153);
      margin-bottom: 40rpx;
    }

    .popup-top-erwei {
      width: 254rpx;
      height: 254rpx;
      margin: 0 auto 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .popup-top-shauxin {
      width: 350rpx;
      height: 80rpx;
      border-radius: $border-radius;
      background: rgb(245, 249, 247);
      margin: 0 auto;
      font-size: 30rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        margin-left: 20rpx;
      }
    }

    .popup-top-text {
      text-align: center;
      font-size: 18rpx;
      color: rgb(153, 153, 153);
      margin-top: 30rpx;
    }
  }

  .popup-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;

    .iconfont-delete {
      font-size: 48rpx;
      margin-top: 20rpx;
      color: #000;
    }
  }
}
.member-code-popup .popup-top {
  height: auto;
}
.yuongjin {
  margin: 20rpx 30rpx;
  padding-bottom: 100px;

  .title {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #ec692b;
  }

  .module {
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;



    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #dddddd;
      gap: 10px;

      .index {
        width: 20px;
        text-align: center;
      }



      .time {
        text-align: right;
        font-size: 13px;
        color: #666;
      }

      .info {
        display: flex;
        align-items: center;
        gap: 5px;
        flex: 1;

        .userInfo {
          display: flex;
          flex-direction: column;
          gap: 3px;

          .name {
            font-weight: bold;
            font-size: 16px;
          }

          .mobile {
            // margin-top: 5px;
            font-size: 13px;
            color: #666;
          }
        }
      }
    }

    .item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }
}

.inviteBtn {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>
